<template>
  <view class="question_wrapper">
    <!-- 答题组件使用swiper轮播组件开发，可以支持左右滑动选题功能。 -->
    <swiper class="question_swiper" :current="current" @change="handleSwiperChange" :indicator-dots="false"
            :autoplay="false" :interval="3000" :duration="1000">
      <swiper-item v-for="(item,index) in questions" :key="item.id">
        <view>
          <!-- 题干部分 -->
          <view class="question_item_name">
            <text v-if="item.type==='1'" :class="'question_item_type_'+item.type">单选题</text>
            <text v-if="item.type==='2'" :class="'question_item_type_'+item.type">多选题</text>
            <text v-if="item.type==='3'" :class="'question_item_type_'+item.type">判断题</text>
            {{index+1}}. {{item.name}}
          </view>

          <!-- 选项部分 -->
          <view v-for="o in item.options"
                :class="'question_item_option'+(item.answered?(o.status ==='1'?' right':(o.status === '0'?' error':' ')):((item.selects?(item.selects.indexOf(o.id)>=0?' select':' '):' ' )))"
                @tap="handleAnswer(item,o)">
            <view class="question_item_option_id">
              {{o.id}}
            </view>
            <view class="question_item_option_name">
              {{o.name}}
            </view>
          </view>

          <!-- 如果是多选，并且还未答此题则提供确认选择按钮 -->
          <view v-if="item.type === '2' && !item.answered" class="question_item_button"
                @tap="handleSubmit(item)">
            提交选择
          </view>

          <!-- 解析部分，答完题后展示解析 -->
          <view v-if="item.answered" class="question_item_parse">
            <view>正确答案： <text style="color:#6db786;font-weight: bold;">{{item.answer}} </text></view>
            <view>{{item.parse}}</view>
          </view>
        </view>
      </swiper-item>
    </swiper>

    <!-- 底部操作栏 -->
    <view class="question_bar">
      <view class="question_bar_icon_wrapper">
        <image @tap="handleCard" class="question_bar_icon" src="../../static/menu.svg" mode="aspectFill">
        </image>
      </view>

      <!-- 页码 -->
      <view class="question_bar_info">
        {{current + 1}} / {{questions.length}}
      </view>
    </view>

    <!-- 隐藏的答题卡 -->
    <view v-if="cardVisible" class="question_card">
      <view v-for="(p,index) in questions"
            :class="'question_card_point'+(index === current ? ' current' :(p.answered?(p.right?' card-right':' card-error'):''))"
            @tap="handleJump(index)">
        {{index + 1}}
      </view>
    </view>
  </view>
</template>

<script>
import {
  loadCategoryById,
  loadQuestionByCategoryId
} from '../../service/api.js';
export default {
  data() {
    return {
      // 当前类别
      category: null,
      // 当前题目列表
      questions: [],
      // 当前是第几题
      current: 0,
      // 答题卡可见性
      cardVisible: false
    }
  },
  // 页面加载事件，通过此事件获取到类别id。
  // 根据id查询类别详情和类别下的题目信息
  onLoad(props) {
    this.category = loadCategoryById(props.categoryId);
    this.questions = loadQuestionByCategoryId(props.categoryId);

    // 将题目类别显示在标题上。
    uni.setNavigationBarTitle({
      title: this.category.name
    });
  },
  methods: {
    // 答题卡跳转指定题目
    handleJump(current) {
      this.current = current;
      this.cardVisible = false;
    },
    // 展示答题卡
    handleCard() {
      this.cardVisible = !this.cardVisible;
      console.log('打开答题卡')
    },
    // 轮播改变事件，记录当前索引
    handleSwiperChange(e) {
      const index = e.detail.current;
      this.current = index;
    },
    /**
     * 回答题目
     * @param {Object} question 正在答的题目
     * @param {Object} option 选择的选项
     */
    handleAnswer(question, option) {
      // 如果此题目已被答过，则直接返回。
      if (question.answered) return;

      // 否则通过数组记录当前用户所答的选项。
      let selects = question.selects || [];
      const index = selects.indexOf(option.id);
      if (index >= 0) {
        selects.splice(index, 1);
      } else {
        selects.push(option.id);
        selects = selects.sort();
      }
      question.selects = selects;
      this.$set(this.questions, this.questions.indexOf(question), question);

      // 如果是单选和判断，则自动进行提交
      if (question.type === '1' || question.type === '3') {
        this.handleSubmit(question);
      }
    },

    /**
     * 提交题目
     * @param {Object} question正在答题的题目
     */
    handleSubmit(question) {
      // 将此题回答状态改成已回答，并进行回答正确失败的验证。
      if (!question.selects || question.selects.length === 0) {
        uni.showToast({
          title: '请选择选项！',
          icon: 'none'
        });
        return;
      }
      question.answered = true;
      question.right = question.answer === question.selects.join('');
      for (let i = 0; i < question.options.length; i += 1) {
        const id = question.options[i].id;
        // 如果这个选项是正确选项
        if (question.answer.split('').indexOf(id) >= 0) {
          // 并且用户也选对了，则给答对标记，否则是给答错标记。
          if (question.selects.indexOf(id) >= 0)
            question.options[i].status = '1';
          else
            question.options[i].status = '0';
        }
        // 如果这个选项不是正确选项，但是用户答了，则给答错标记
        else {
          if (question.selects.indexOf(id) >= 0)
            question.options[i].status = '0';
        }
      }
      this.$set(this.questions, this.questions.indexOf(question), question);
    }
  }
}
</script>

<style>
.question_card {
  background: white;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 110rpx;
  height: 60vh;
  box-shadow: 0 0 80rpx 8rpx #0000003d;
  display: flex;
  flex-wrap: wrap;
  padding: 30rpx;
}

.question_card_point {
  width: 70rpx;
  height: 70rpx;
  border: 2rpx solid #000000a6;
  color: #000000a6;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin: 20rpx;
}

.question_wrapper {
  background: #0000000d;
  min-height: 100vh;
}

.question_swiper {
  min-height: 100vh;
}

.question_item_name {
  background: white;
  padding: 30rpx;
  min-height: 200rpx;
  font-size: 32rpx;
  color: #1d2342b0;
  letter-spacing: 1rpx;
  line-height: 50rpx;
}

.question_item_type_1 {
  background: #7496ff;
  color: white;
  padding: 6rpx 16rpx;
  font-size: 24rpx;
  margin-right: 20rpx;
  border-radius: 10rpx;
}

.question_item_type_2 {
  background: #ffa874;
  color: white;
  padding: 6rpx 16rpx;
  font-size: 24rpx;
  margin-right: 20rpx;
  border-radius: 10rpx;
}

.question_item_type_3 {
  background: #ff7474;
  color: white;
  padding: 6rpx 16rpx;
  font-size: 24rpx;
  margin-right: 20rpx;
  border-radius: 10rpx;
}

.question_item_option {
  background: white;
  margin: 30rpx 30rpx 0 30rpx;
  padding: 30rpx;
  font-size: 30rpx;
  border-radius: 10rpx;
  display: flex;
  align-items: center;
  border: 2rpx solid white;
}

.question_item_option_id {
  font-weight: bold;
}

.question_item_option_name {
  margin-left: 30rpx;
  color: #000000b3;
}

.question_item_button {
  background: #6296e8;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 60rpx 30rpx 30rpx 30rpx;
  padding: 26rpx;
  font-size: 30rpx;
  border-radius: 10rpx;
  color: white;
}

.select {
  border: 2rpx solid #7f93ff;
}

.right {
  border: 2rpx solid #92df9a;
}

.error {
  border: 2rpx solid #fba1a1;
}

.question_item_parse {
  background: white;
  padding: 30rpx;
  margin: 30rpx;
  font-size: 28rpx;
  color: #000000ad;
}

.question_bar {
  position: fixed;
  left: 0;
  bottom: 0;
  right: 0;
  background: white;
  display: flex;
  align-items: center;
  padding: 40rpx;
  z-index: 9999;
}

.question_bar_icon_wrapper {
  display: flex;
  align-items: center;
  flex: 1;
}

.question_bar_icon {
  width: 36rpx;
  height: 36rpx;
}

.question_bar_info {
  color: #000000a3;
  font-size: 28rpx;
}

.current {
  background: #3493f9e6;
  color: white;
  border: 2rpx solid #3493f9e6;
}

.card-right {
  background: #92df9a;
  color: white;
  border: 2rpx solid #92df9a;
}

.card-error {
  background: #fba1a1;
  color: white;
  border: 2rpx solid #fba1a1;
}
</style>
